<template>
  <div class="tanchuangbg" v-show="showMask" @click="toggleShow" style="display: none;" >

    <div class="xiazhutc" v-show="!showCopy" @click.stop style="display: none;">
      <p class="xiazhutc_p1">{{$t('invite.invite_title')}}
        <i @click="toggleShow" class="iconfont icon-guanbi" ></i>
      </p>
      <div class="textarea_yaoqingtc">
        <div class="textarea_yaoqingtc_1">
          <span>{{$config.shareUrl}}</span>
        </div>
      </div>
      <div class="xiazhutc_btn mrb30p" >
        <span @click="copyLink">{{$t('invite.copy')}}</span>
        <!--<button-->
          <!--v-clipboard:copy="{{$config.shareUrl}}"-->
          <!--v-clipboard:success="onCopy"-->
          <!--@click="copyLink">复制</button>-->
      </div>
      <p class="textarea_yaoqingtc_p">{{$t('invite.invite_text')}}</p>
    </div>

    <div class="xiazhutc" v-show="showCopy" @click.stop style="display: none;">
      <p class="xiazhutc_p1">{{$t('invite.copy_suc')}}<i @click="toggleShow" class="iconfont icon-guanbi" ></i></p>

      <P class="xiazhutc_p2">{{$t('invite.copy_suc_text')}}</P>
      <div class="xiazhutc_btn mrb30p" >
        <span @click="copySuc">{{$t('invite.sure')}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      showMask: false,
      showCopy: false
    }
  },
  computed: {
    account: function () {
      return this.$store.getters.getAccount
    }
  },
  methods: {
    toggleShow () {
      if (this.showMask) {
        this.init()
      } else {
        if (!this.account) {
          this.$message({message: this.$t('presell.login_first')})
          return
        }
        this.showMask = true
      }
    },
    async copyLink () {
      var timestamp = Date.parse(new Date())
      var shareUrl = this.$config.shareUrl + '?ref=' + this.account.name + '&time=' + timestamp
      console.log(shareUrl)
      this.$copyText(shareUrl).then(res => {
        this.showCopy = true
        // console.log(res)
      }).catch(err => {
        console.log('copy err: ', err)
        this.$message.error(this.$t('invite.copy_fail'))
      })
    },
    copySuc () {
      this.init()
    },
    init () {
      this.showMask = false
      this.showCopy = false
    }
  }
}
</script>

<style></style>
